<template>
	<view class="box2">
		<uni-grid :column="4">
			<uni-grid-item>
				我是是 是是是
			</uni-grid-item>
			<uni-grid-item>
				我是是 是是是
			</uni-grid-item>
			<uni-grid-item>
				我是是 是是是
			</uni-grid-item>
			<uni-grid-item>
				我是是 是是是
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const icon_test = ref([{
			id: '1',
			img: '../../static/icons/充值.png',
			text: '余额充值',
			url: '/pages/balance/balance'
		}, {
			id: '2',
			img: '../../static/icons/订购.png',
			text: '套餐订购',
			url: '/pages/detail/detail'
		}, {
			id: '3',
			img: '../../static/icons/话费.png',
			text: '赠送话费',
			url: '/pages/detail/detail'
		}, {
			id: '4',
			img: '../../static/icons/检测.png',
			text: '智能检测',
			url: '/pages/detail/detail'
		}, {
			id: '5',
			img: '../../static/icons/记录.png',
			text: '套餐记录',
			url: '/pages/detail/detail'
		}, {
			id: '6',
			img: '../../static/icons/列表.png',
			text: '充值记录',
			url: '/pages/detail/detail'
		}, {
			id: '7',
			img: '../../static/icons/流量.png',
			text: '流量记录',
			url: '/pages/detail/detail'
		}, {
			id: '8',
			img: '../../static/icons/实名认证.png',
			text: '实名认证',
			url: '/pages/detail/detail'
		}, {
			id: '9',
			img: '../../static/icons/设备.png',
			text: '我的设备',
			url: '/pages/detail/detail'
		}, {
			id: '10',
			img: '../../static/icons/切换.png',
			text: '切换网络',
			url: '/pages/detail/detail'
		}

	]);

	function goToDetailPage() {
		uni.navigateTo({
			url: '/pages/detail/detail'
		})
	};
</script>


<style lang="scss">
	.box2 {
		margin-top: 50vw;
		background-color: rgb(255, 255, 255);
		border-radius: 5px;
		width: 86vw;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		// flex-direction: column;
		padding: 4vw;
	}

	.button1 {
		width: 25vw;
		background-color: blue;
		color: rgb(255, 255, 255);
		text-align: center;
		font-size: 15px;
		padding: 5px;
		border-radius: 20px;
	}

	.triangle-up {
		width: 0;
		height: 0;
		margin-left: 8vw;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-bottom: 15px solid #5396FC;
	}

	.renew {
		width: 80vw;
		height: 12vw;
		padding: 0 5vw;
		color: #FFFFFF;
		background-color: #5396FC;
		border-radius: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.button3 {
		width: 20vw;
		border-radius: 50px;
		padding: 5px;
		font-size: 15px;
		background-color: #2BB222;
		text-align: center;
	}


	.icons {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.external {
		width: 55%;
		height: 55%;
		background-color: #E7F1FF;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.internal {
		width: 70%;
		height: 70%;
		background-color: #0064F9;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.icons_image {
		width: 25px;
		height: 25px;
	}
</style>